<template>
	<view class="main-wrap bg-white">
		<view class="login-form">
			<view class="cu-form-group">
				<view class="title">账号</view>
				<input v-model="loginForm.phone" placeholder="请输入手机号" name="input" type="number" maxlength="11"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">密码</view>
				<input v-model="loginForm.password" placeholder="请输入密码" name="input" type="password" maxlength="8"></input>
			</view>
			<view class="operation-btn-wrap">
				<button class="cu-btn round bg-green margin-tb-sm lg operation-btn" @click="login()">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import userApi from '@/api/user.js'
	import {isEmptyStr} from '@/utils/validate.js'
	export default {
		name: 'LoginView',
		data() {
			return {
				loginForm: {
					phone: '17521086309',
					password: '123abc'
				}
			}
		},
		onShow() {
			uni.hideTabBar();
		},
		methods: {
			login() {
				let errMsg = '';
				if (isEmptyStr(this.loginForm.phone)) {
					errMsg = '请输入用户名';
				} else if (isEmptyStr(this.loginForm.password)) {
					errMsg = '请输入密码';
				}
				if (errMsg) {
					uni.showToast({
						title: errMsg,
						icon: 'none'
					})
				} else {
					userApi.login(this.loginForm).then(res => {
						const data = res.data.data;
						uni.setStorageSync('token', data.token);
						uni.$emit('userLogin', {
							isLogin: true
						});
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.main-wrap{
		height: 100%;
		.login-form{
			padding-top: 20vh;
		}
	}
	.cu-form-group {
		border-top: 0px;
	    border-bottom: 1px solid #eee;
	}
</style>
